<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-01-19 15:35:44
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-04-29 17:32:54
 * @Description:
 *
 * Copyright (c) 2024 by error: git config user.name & please set dead value or install git, All Rights Reserved.
-->
<template>
  <div class="wrap">
    <div class="top_title">
      <span>菜单编辑</span>
      <el-button size="mini" @click="saveClick">保存</el-button>
    </div>
    <el-form
      ref="menuForm"
      size="small"
      :model="menuForm"
      :rules="rules"
      label-width="80px"
      class="demo-menuForm"
      label-position="left"
      style="margin-top: 16px; font-size: 12px;"
    >
      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="menuForm.menuName" />
      </el-form-item>
      <el-form-item label="菜单路由" prop="value">
        <el-input v-model="menuForm.value" />
      </el-form-item>
      <el-form-item label="菜单路径" prop="url">
        <el-input v-model="menuForm.url" />
      </el-form-item>
      <el-form-item label="菜单类型" prop="menuType">
        <el-radio-group v-model="menuForm.menuType">
          <el-radio :label="1">目录</el-radio>
          <el-radio :label="2">菜单</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="父级菜单" prop="passWord">
        <el-tree
          ref="tree"
          style="margin-top: 6px"
          :data="menuList"
          check-strictly
          default-expand-all
          node-key="id"
          show-checkbox
          :props="defaultProps"
          @check="handleCheckChange"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { menuAdd, menuUpdate } from '@/api/golangApi/menu'
export default {
  name: 'EditMenuForm',
  props: {
    currSystem: {
      type: Object,
      default: () => ({})
    },
    menuList: {
      type: Array,
      default: () => ([])
    },
    saveType: {
      type: String,
      default: 'add'
    },
    currMenuForm: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      menuForm: {
        menuGroupId: '',
        menuName: '',
        value: '',
        url: '',
        menuType: 2,
        parentId: 0
      },
      defaultProps: {
        children: 'menuSvoList',
        label: 'menuName'
      },
      rules: {}
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    async menuAdd() {
      try {
        const res = await menuAdd(this.menuForm)
        if (res.code === 200) {
          this.$emit('menuGroupLeftMenu')
          this.$message.success('新增菜单成功')
        }
      } catch (error) {
        console.log(error)
      }
    },
    async menuUpdate() {
      try {
        const res = await menuUpdate(this.menuForm)
        if (res.code === 200) {
          this.$emit('menuGroupLeftMenu')
          this.$message.success('修改菜单成功')
        }
      } catch (error) {
        console.log(error)
      }
    },
    saveClick() {
      if (this.saveType === 'add') {
        this.menuAdd()
      } else {
        this.menuUpdate()
      }
    },
    initData() {
      if (this.saveType === 'edit') {
        this.$nextTick(() => {
          this.menuForm = this.currMenuForm
          this.$refs.tree.setCheckedKeys([this.currMenuForm.parentId])
        })
      }
      this.menuForm.menuGroupId = this.currSystem.id
    },
    handleCheckChange(data) {
      this.$refs.tree.setCheckedKeys([data.id])
      this.menuForm.parentId = data.id || 0
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  height: 100%;
  padding: 16px;
  .top_title {
    border-bottom: 1px solid #eee;
    padding-bottom: 6px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
